<template>
	<view class="payview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="上传收款码"></hx-navbar>
		</view>

		<block v-if="step == 0">
			<view class="btn-box">
				<u-button class="btn" type="primary" @tap="stepTo1(0)">微信</u-button>
				<u-button class="btn" type="success" @tap="stepTo1(1)">支付宝</u-button>
			</view>
		</block>

		<block v-if="step == 1">
			<view class="ttl-box">
				<block v-if="type == 0">
					添加微信账号
				</block>
				<block v-else>
					添加支付宝账号
				</block>
				<text>输入密码验证身份</text>
			</view>
			<view class="row-box">
				<view class="row-item">
					<text class="tit">输入密码:</text>
					<input class="input" type="password" v-model="password" placeholder="请输入密码" />
				</view>
			</view>

			<view class="fiexd-btm">
				<u-button class="custom-style" type="primary" @tap="stepTo2()">确定</u-button>
			</view>
		</block>

		<block v-if="step == 2">
			<view class="ttl-box">
				<block v-if="type == 0">
					添加微信收款码
				</block>
				<block v-else>
					添加支付宝收款码
				</block>
			</view>
			<view class="inner-box">
				<view class="row-box inline-box">
					<view class="row-item">
						<uni-upimg @change="getImageInfo" :upimg_preview="serviceArr" :upload_count="1"></uni-upimg>
					</view>
					<text>上传收款码</text>
				</view>
			</view>

			<view class="fiexd-btm">
				<u-button class="custom-style" type="primary" @tap="confirm()">上传</u-button>
			</view>
		</block>

		<block v-if="step == 3">
			<view class="inner-box" v-if="alipayQrcode">
				<image :src="alipayQrcode" mode="scaleToFill"></image>
				支付宝收款码
			</view>
			<view class="inner-box" v-if="weixinQrcode">
				<image :src="weixinQrcode" mode="scaleToFill"></image>
				微信收款码
			</view>

			<view class="fiexd-btm">
				<u-button class="custom-style" type="primary" @tap="stepTo3()">更换</u-button>
			</view>
		</block>
	</view>
</template>

<script>
	import uniUpimg from '@/components//uni-upimg/uni-upimg.vue'
	export default {
		components: {
			uniUpimg
		},
		data() {
			return {
				step: 0,
				type: 0,
				password: '',
				serviceArr: [],
				alipayQrcode: '',
				weixinQrcode: ''
			}
		},
		onLoad(option) {
			this.step = 3
			this.type = 1
			this.loadData()
		},
		methods: {
			loadData() {
				this.$api.request('POST', '/api/user/selectUserInfo', {}, false).then(res => {
					this.alipayQrcode = res.data.alipayQrcode
					this.weixinQrcode = res.data.weixinQrcode
					console.log(res.data.alipayQrcode)
					console.log(res.data.weixinQrcode)
					if (this.alipayQrcode || this.weixinQrcode) {
						this.step = 3
					}
				})
			},
			getImageInfo(e) {
				this.serviceArr = e
				console.log(e)
			},
			stepTo1(e) {
				this.step = 1
				this.type = e
			},
			stepTo2(e) {
				if (!this.password) {
					this.$api.msg('请输入密码')
					return
				}
				this.step = 2
			},
			stepTo3(e) {
				this.step = 0
			},
			//提交
			confirm() {
				let url = '/api/car/insertUserInfoWeixinByUserId'
				let data = {
					passWord: this.password,
					weixinQrcode: this.serviceArr.join(','),
					alipayQrcode: this.serviceArr.join(','),
				}
				if (this.type == 1) {
					url = '/api/car/insertUserInfoAlipayByUserId'
				}
				this.$api.request('POST', url, data).then(res => {
					this.$api.msg('收款码已提交')
					this.serviceArr = []
					this.step = 3
				})
			},
		}
	}
</script>

<style lang="less">
	.payview {
		min-height: 100vh;
		background-color: #fff;
	}

	.ttl-box {
		margin: 100upx 30upx;
		font-size: 40upx;
		text-align: center;

		text {
			display: block;
			margin-top: 20upx;
			font-size: 24upx;
			color: rgba(136, 136, 136, 1);
		}
	}

	.inner-box {
		text-align: center;

		.inline-box {
			display: inline-block;
			vertical-align: top;
		}

		image {
			margin: 150upx auto 50upx;
			display: block;
			width: 200upx;
			height: 200upx;
		}
	}

	.btn-box {
		margin: 200upx 30upx 100upx;

		.btn {
			margin-top: 60upx;
			height: 100upx;
			line-height: 100upx;
		}
	}
</style>
